<template>
    <customer-dialog v-model="visible" :show-footer="false" :hide-on-click-modal="false">
        <template #header>
            <span class="auto-grow flexable v-center">
                <i class="fa fa-fw fa-layer-group colored-icon space mr-10"></i>
                SRF::{{ srf.namespace }}
            </span>
        </template>
        <div style="width: 1200px;">
            <div class="flexable space-between p-10">
                <div class="description">{{ formatDatetime (srf.timestamp) }}</div>
                <div class="description">{{ srf.host }}</div>
                <div class="description">{{ formatDatetime (srf.lastUpdate )}}</div>
            </div>
            <div class="description srf-dlg-desc p-10">{{ srf.description }}</div>
            <div class="flexable" style="height: 560px">
                <div class="scrollable bordered right" style="width: 300px; min-width: 300px">
                    <ul class="srf-items">
                        <li v-for="(service, key) in srf.items" :key="key" @click="selectService (service)">
                            <a class="signature plain" :class="{active: service.active}">{{ service.name }}</a>
                        </li>
                    </ul>
                </div>
                <div class="auto-grow flexable row-mode p-10">
                    <template v-if="!!sri">
                        <div class="description" v-if="sri && sri.description" v-html="sri.description" />
                        <div class="signature">Interfaces:
                            <ul>
                                <li v-for="(type, index) of sri.types" :key="index">{{ type }}</li>
                            </ul>
                        </div>
                        <div class="scrollable auto-grow">
                            <method-detail v-for="(method, index) of sri.methods" :key="index" :method="method" />
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </customer-dialog>
</template>
<script>
import CustomerDialog from "@/components/customer-dialog.vue";
import MethodDetail from "@/components/method-detail.vue";
import {metadata} from "@/utils/metadata";

import '@/utils/functions';
import { getSimpleName as simple} from "@/utils/functions";

export default {
    name: 'srf-detail',
    props: {
        modelValue: {type: Boolean, required: true},
        srf: {type: Object, required: true}
    },
    emits: ['update:modelValue'],
    computed: {
        visible : {
            get () { return this.modelValue; },
            set (value) { this.$emit ('update:modelValue', value); },
        }
    },
    components: {CustomerDialog, MethodDetail},
    data () {
        return {
            sri: undefined
        };
    },
    methods: {
        formatDatetime (timestamp) {
            return new Date (timestamp).format ('yyyy-MM-dd HH:mm:ss');
        },
        selectService (service) {
            for (let sri of Object.values (this.srf.items)) {
                if (sri.active) {
                    delete sri.active;
                    break;
                }
            }
            service.active = true;
            this.sri = null;
            metadata.service = undefined;

            setTimeout (() => {
                this.sri = service;
                metadata.service = service.name;
            }, 100);
        },
        simple,
    },
    mounted () {
        console.log ('srf-detail loaded.')
        metadata.namespace = this.srf.namespace;
    },
    unmounted () {
        console.log ('srf-detail unloaded.');
        if (this.sri) {
            delete this.sri.active;
        }
    },
};
</script>
<style scoped>
.sri-enter-active,
.sri-leave-active {
    transition: opacity 0.5s ease;
}

.sri-enter-from,
.sri-leave-to {
    opacity: 0;
}
</style>